<extend name="./public/frame.html"/>
<block name="content">
    <link rel="stylesheet" href="__UI__/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="__UI__/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="__UI__/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="__UI__/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="__UI__/ztree/js/jquery.ztree.exedit.js"></script>
    <style>
        .menu {
            margin: 30px;
            height: calc(100vh - 180px);
            /*overflow-y: scroll;*/
        }
        .league_cont_flt {
            float: left;
            width: 300px;
            height: calc(100vh - 60px);
            border: 1px solid #e0e0e0;
            border-radius:3px;
        }
        .league_cont_title {
            height: 60px;
            border-bottom: 1px solid #e0e0e0;
        }
        .league_cont_title .lea_tit {
            margin-left: 10px;
            line-height: 60px;
            font-weight: 500;
            font-size: 14px;
            float: left;
        }
    </style>
    <div class="layui-table">
        <div class="layui-col-md2" style="width: 20%">
            <div class="league_cont_flt">
                <div class="league_cont_title"> <span class="lea_tit">问题类别</span> </div>
                <div class="menu">

                    <div class="content_wrap">
                        <div class="zTreeDemoBackground left">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md8" style="width: 80%">
            <div class="layer_content">
                <div class="layer_form">
                    <div class="down_icon"></div>
                    <div class="layer_div">
                        <div class="layer_tit">
                            问题类别：
                        </div>
                        <div class="layer_control">
                            <select lay-verify="required" class="w180" id="cate_id">
                                <option value="">问题类别</option>
                                <volist name="help_cate" id="vo">
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    <volist name="vo.son" id="vo2">
                                        <option value="{$vo2.id}">　　{$vo2.name}</option>
                                        <volist name="vo2.son" id="vo3">
                                            <option value="{$vo3.id}">　　　　{$vo3.name}</option>
                                        </volist>
                                    </volist>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="layer_div">
                        <div class="layer_tit">
                            问题名称：
                        </div>
                        <div class="layer_control">
                            <input type="text" placeholder="问题名称" class="w180" id="title">
                        </div>
                    </div>
                    <div class="button_search">
                        <button class="layui-btn layui-btn-warm" data-url="{:url('add')}" onclick="add_t(this,'添加问题')" style="float: right;margin-right: 52px;">添加问题</button>
                        <button class="layui-btn" data-type="search" style="float: right;">搜索</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{:url('index')}', page: true, limit: 10, id:'help'}" lay-filter="help">
                <thead>
                <tr>
                    <th lay-data="{field:'id', width:60,align:'center', fixed: true, sort: true}">ID</th>
                    <th lay-data="{field:'cate1_id', width:150,align:'center'}">类型</th>
                    <th lay-data="{field:'cate2_id', width:150,align:'center'}">类别</th>
                    <th lay-data="{field:'cate3_id', width:150,align:'center'}">子类别</th>
                    <th lay-data="{field:'title', width:300,align:'center'}">问题名称</th>
                    <th lay-data="{field:'update_time', width:160,align:'center'}">操作时间</th>
                    <th lay-data="{field:'user_name', width:100,align:'center'}">操作人</th>
                    <th lay-data="{fixed:'right', toolbar: '#barDemo', width:100, align:'center'}">操作</th>
                </tr>
                </thead>
            </table>
            <div class="layui-hide" id="barDemo">
                <a lay-event="edit" style="width: 50px">编辑</a>
                <a lay-event="del" style="width: 50px;color: red;">删除</a>
            </div>
        </div>
    </div>
    <script>
        layui.use(['table','form'], function () {
            var table = layui.table;
            //监听工具条
            table.on('tool(help)', function (obj) {
                var data = obj.data;
                var id = data.id;
                if (obj.event === 'del') {
                    layer.confirm('确定删除吗?',function(index){
                        var url = "{:U('del')}";
                        $.post(url,{id:id},function(data){
                            if(data.status == 1){
                                layer.msg('成功删除',{'icon':1});
                                window.location.reload();
                            }else{
                                layer.msg('操作失败',{'icon':2});
                            }
                        },'json');
                        layer.close(index);
                    })
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: '问题修改',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("add","id=")}' + id //iframe的url
                    });
                }
            });
            var $ = layui.jquery, active = {
                search: function () {
                    var title = $.trim($('#title').val()),
                        cate_id = $.trim($('#cate_id').val());
                    table.reload('help',{
                        url: '/admin/Help/index',
                        where: {
                            title : title,
                            cate_id : cate_id
                        } //设定异步数据接口的额外参数
                    });
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>

    <!--tree树 js-->
    <SCRIPT type="text/javascript">
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            edit: {
                enable: true,
                editNameSelectAll: true,
                //showRemoveBtn: showRemoveBtn,
                //showRenameBtn: showRenameBtn
                removeTitle: "删除",
                renameTitle: "修改"
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeEditName: beforeEditName,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                onRemove: onRemove,
                onRename: onRename
            }
        };

        var zNodes = {$help};
        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }
        function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            setTimeout(function() {
                /*if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
                    setTimeout(function() {
                        zTree.editName(treeNode);
                    }, 0);
                }*/
                zTree.editName(treeNode);
            }, 0);
            return false;
        }
        function beforeRemove(treeId, treeNode) {
            if(treeNode.id==1 || treeNode.id==2){
                layer.msg('根节点不可以被删除！',{'icon':2});
                return false;
            }
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            //return confirm("是否确认删除该类别？确认后该类别下所有问题将一并删除。");
            layer.confirm("是否确认删除该类别？确认后该类别下所有问题将一并删除。", {
                btn: ['是','否']
            }, function(index){
                zTree.removeNode(treeNode);
                var url = "{:U('delCate')}";
                $.post(url,{id:treeNode.id},function(data){
                },"json")
                layer.close(index);
            }, function(index){
                layer.close(index);
            });
            return false;
        }
        function onRemove(e, treeId, treeNode) {
            showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var url = "{:U('delCate')}";
            $.post(url,{id:treeNode.id},function(data){
            },"json")
        }
        function beforeRename(treeId, treeNode, newName, isCancel) {
            className = (className === "dark" ? "":"dark");
            showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
            if (newName.length == 0) {
                setTimeout(function() {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.cancelEditName();
                    alert("节点名称不能为空.");
                }, 0);
                return false;
            }
            return true;
        }
        function onRename(e, treeId, treeNode, isCancel) {
            showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
            var url = "{:U('editCate')}";
            $.post(url,{id:treeNode.id,name:treeNode.name},function (data) {
            },"json")
        }
        function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isFirstNode;
        }
        function showRenameBtn(treeId, treeNode) {
            return !treeNode.isLastNode;
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='"+className+"'>"+str+"</li>");
            if(log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now= new Date(),
                h=now.getHours(),
                m=now.getMinutes(),
                s=now.getSeconds(),
                ms=now.getMilliseconds();
            return (h+":"+m+":"+s+ " " +ms);
        }

        //var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.tId);
            if (btn) btn.bind("click", function(){
                if(treeNode.level==2){
                    layer.msg('子节点最多添加到三级！',{icon:2});
                    return false;
                }
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                //zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:treeNode.name});
                var url = "{:U('addCate')}";
                $.post(url,{id:treeNode.id,name:treeNode.name,level:treeNode.level},function(data){
                    zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:"未命名"});
                    var node = zTree.getNodeByParam("id", data.id, null); //根据新的id找到新添加的节点
                    //zTree.selectNode(node); //让新添加的节点处于选中状态
                    zTree.editName(node); //让新添加的节点处于编辑状态
                },"json");
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };
        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
        });
        //-->
    </SCRIPT>
    <style type="text/css">
        .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
    </style>
</block>
